<style lang=less>
	.zhuliu{
		width: 1280px;
		margin: 0 auto 20px;
		li{
			width: 1500px;
			height: 200px;
			/*overflow: hidden;*/
			div{
				float: left;
				width: 376px;
				height: 137px;
				padding: 27px 0 34px 50px;
				border: 1px solid #18697c;
				img{
					float:left;
					width: 72px;
					height: 72px;
				}
				aside{
					float: left;
					padding-top: 32px;
					padding-left: 14px;
					text-align: left;
					.priceNum{
						color: #cbd7f0;
					}
					p{
						margin-bottom: 20px;
					}
					.title{
						color: #fffeff;
						font-size:20px;

					}
					.rise {
                        color: #e66b41;
                        font-size: 16px;
                    }
                    .fall {
                        color: #03be87;
                        font-size: 16px;
                    }
                    .yuedeng{
                    	color: #61688a;
                    	font-size:14px;
                    }
                    #allNum{
                    	font-size: 14px;
                    	color: #666b93;
                    }
                    .priceNum{
                    	font-size: 28px;
                    }
                    .numWarp{
                    	color: #e9e9ff;
                    }
				}
				
			}
			.indexcommodity_box:hover{
				background-color: #05132f;
                box-shadow: 1px 0px 8px #1e8495;
            	transform: scale(1.02);
                transition: all 2s;
			}
		}

	}
</style>
<template lang="html">
	<div class="hangqingWarp" v-if="list.length !=0 ">
		<ul class="zhuliu" style="display: none;">
			<li >
				<router-link :to="{path:'/exchange'}">
					<div v-if="item.code == 'btc_usdt'" v-for="item in list" :data_code='item.code' class="indexcommodity_box">
						<img src="../../assets/image/index/BTC.png" alt="" />
						<!-- <img v-if="item.code == 'eth_usdt'" src="../../assets/image/index/eth_usdt.png">
						<img v-if="item.code == 'eos_usdt'" src="../../assets/image/index/eos_usdt.png"> -->
						<aside>
							<p class="title">
								{{$public.InterceptingAdd(item.name)}} / USDT
								<span v-if="item.change > 0" class="changeRate">
									<span class="rise">{{item.changeRate}}</span>
									<i class="el-icon-caret-top rise"></i>
								</span>
								<span v-else class="changeRate">
									<span class="fall">{{item.changeRate}}</span>
									<i class="el-icon-caret-bottom fall"></i>
								</span>
							</p>
							<p class="price">
								<span class="priceNum"> 
									<span class="priceone">{{item.price}}</span>
								</span>
								<span class="yuedeng">  ≈{{item.cnyPrice.toFixed(2)}}  CNY</span>
							</p>
							<p id="allNum">
								{{$t("home.main2[2]")}}  : <span class="numWarp">{{item.volume}}</span><!-- 成交量 -->
							</p>
						</aside>
					</div>
				</router-link>
				<router-link :to="{path:'/exchange'}">
					<div v-if="item.code == 'eth_usdt'" v-for="item in list" :data_code='item.code' class="indexcommodity_box" style="border-left:none">
						<img src="../../assets/image/index/ETH.png">
						<aside>
							<p class="title">
								{{$public.InterceptingAdd(item.name)}} / USDT
								<span v-if="item.change > 0" class="changeRate">
									<span class="rise">{{item.changeRate}}</span>
									<i class="el-icon-caret-top rise"></i>
								</span>
								<span v-else class="changeRate">
									<span class="fall">{{item.changeRate}}</span>
									<i class="el-icon-caret-bottom fall"></i>
								</span>
							</p>
							<p class="price">
								<span class="priceNum"> 
									 <span class="priceone">{{item.price}}</span>
								</span>
								<span class="yuedeng">  ≈{{item.cnyPrice.toFixed(2)}}  CNY</span>
							</p>
							<p id="allNum">
								{{$t("home.main2[2]")}}  : <span class="numWarp">{{item.volume}}</span><!-- 成交量 -->
							</p>
						</aside>
					</div>
				</router-link>
				<router-link :to="{path:'/exchange'}">
					<div v-if="item.code == 'eos_usdt'" v-for="item in list" :data_code='item.code' class="indexcommodity_box" style="border-left:none">
						<img src="../../assets/image/index/EOS.png">
						<aside>
							<p class="title">
								{{$public.InterceptingAdd(item.name)}} / USDT
								<span v-if="item.change > 0" class="changeRate">
									<span class="rise">{{item.changeRate}}</span>
									<i class="el-icon-caret-top rise"></i>
								</span>
								<span v-else class="changeRate">
									<span class="fall">{{item.changeRate}}</span>
									<i class="el-icon-caret-bottom fall"></i>
								</span>
							</p>
							<p class="price">
								<span class="priceNum"> 
									<span class="priceone">{{item.price}}</span>
								</span>
								<span class="yuedeng">  ≈{{item.cnyPrice.toFixed(2)}}  CNY</span>
							</p>
							<p id="allNum">
								{{$t("home.main2[2]")}}  : <span class="numWarp">{{item.volume}}</span><!-- 成交量 -->
							</p>
						</aside>
					</div>
				</router-link>
			</li>
		</ul>
		<ul class="hangqwingul" >
				<li  v-for="(item,index) in list" :data_code='item.code' class="indexcommodity_box" :style="index%4==2?'margin-right:0px;':''" @click="RoutingJump(item.code)">
					<!--<img :src="'../../assets/image/index/'+ item.code +'.png'"/>-->
					<img v-if="item.code == 'btc_usdt'" src="../../assets/image/index/btc_usdt.png" alt="" />
					<img v-if="item.code == 'bch_usdt'" src="../../assets/image/index/bch_usdt.png" alt="" />
					<img v-if="item.code == 'eth_usdt'" src="../../assets/image/index/eth_usdt.png">
					<img v-if="item.code == 'etc_usdt'" src="../../assets/image/index/etc_usdt.png">
					<img v-if="item.code == 'ltc_usdt'" src="../../assets/image/index/ltc_usdt.png">
					<img v-if="item.code == 'eos_usdt'" src="../../assets/image/index/eos_usdt.png">
					<img v-if="item.code == 'zec_usdt'" src="../../assets/image/index/zec_usdt.png">
					<img v-if="item.code == 'dash_usdt'" src="../../assets/image/index/dash_usdt.png">
					<aside>
							<p class="title">
								{{$public.InterceptingAdd(item.name)}} / USDT
								<span v-if="item.change > 0" class="changeRate">
									<span class="rise">{{item.changeRate}}</span>
									<i class="el-icon-caret-top rise"></i>
								</span>
								<span v-else class="changeRate">
									<span class="fall">{{item.changeRate}}</span>
									<i class="el-icon-caret-bottom fall"></i>
								</span>
							</p>
							<p class="price">
								<span class="priceNum"> 
									<span class="priceone">{{item.price}}</span>
								</span>
								<span class="yuedeng">  ≈{{item.cnyPrice.toFixed(2)}}  CNY</span>
							</p>
							<p class="allNum">
								{{$t("home.main2[2]")}}  : <span class="numWarp">{{item.volume}}</span><!-- 成交量 -->
							</p>
					</aside>
					<!-- <p class="title">{{$public.InterceptingAdd(item.name)}}</p>
					<p class="price">
						<span class="priceNum"> 
							<span class="priceone">{{item.price}}</span>
						</span>
						<span v-if="item.change > 0" class="changeRate">
							<i class="el-icon-caret-top rise"></i>
							<span class="rise">{{item.changeRate}}</span>
						</span>
						<span v-else class="changeRate">
							<i class="el-icon-caret-bottom fall"></i>
							<span class="fall">{{item.changeRate}}</span>
						</span>
					</p>
					<p class="allNum">
						成交量  : <span class="numWarp">{{item.volume}}</span>
					</p> -->
				</li>
		</ul>	
	</div>
	
	<div class="hangqingWarp" v-else>
		<div class="nolistWarp">
			<img src="../../assets/image/timg.gif" alt="" style="width: 90px;"/>
			
		</div>
	</div>
	</section>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				second: [],
				MainData: "",
				SecondData: "",
				codedata: [],
				pricedata: [],
				changeRate: [],
				highdata: [],
				lowdata: [],
				volumedata: [],
				changedata:[],
				yuedengdata:[],
			}
		},
		methods: {
			// 获取主区数据
			GetDatamain() {
				var connet = this;
				$.get(connet.$http.getNewInfo, {}, function(result) {
					if(result.status == "200") {
						console.log(result.data);
						connet.list = result.data;
						connet.MainDatapush();
					}
				});
			},
			// 主区数据推送
			MainDatapush() {
				var connet = this;
				window.setTimeout(function() {
					var domdata = $('.indexcommodity_box');
					for(var i = 0; i < domdata.length; i++) {
						connet.codedata.push(domdata[i].getAttribute('data_code'));
						connet.pricedata.push( domdata.eq(i).find('.priceone')[0] );
						connet.changeRate.push( domdata.eq(i).find('.changeRate')[0] );
						connet.volumedata.push( domdata.eq(i).find('.numWarp')[0] );
						connet.yuedengdata.push( domdata.eq(i).find('.yuedeng')[0] );
					};
				}, 1500);
				
				// 首先判断是否 支持 WebSocket
				if('WebSocket' in window) {
					connet.MainData = new WebSocket(connet.$http.MainwsUrl);
				} else if('MozWebSocket' in window) {
					connet.MainData = new MozWebSocket(connet.$http.MainwsUrl);
				} else {
					connet.MainData = new SockJS(connet.$http.MainskUrl);
				}
				// 打开时
				connet.MainData.onopen = function(evnt) {
					var msg = {
						code: "all"
					};
					// 发送消息
					connet.MainData.send(JSON.stringify(msg));
				};
				// 处理消息时
				connet.MainData.onmessage = function(evnt) {
					var datanum = JSON.parse(evnt.data);
//					return;					
					for(var i = 0; i < connet.codedata.length; i++) {
						if(datanum.code == connet.codedata[i]) {
							connet.pricedata[i].innerText = datanum.price;
							connet.changeRate[i].innerHTML =  datanum.changeRate;
							connet.volumedata[i].innerText = datanum.volume;
							connet.yuedengdata[i].innerHTML = '≈'+datanum.cnyPrice.toFixed(2)+'  CNY';
							if(Number(datanum.change) < 0){
								connet.changeRate[i].innerHTML = "    <span class=fall>"+datanum.changeRate+"</span><i class='el-icon-caret-bottom fall'></i>"
								
							}else{
								connet.changeRate[i].innerHTML = "  <span class=rise>"+datanum.changeRate+"</span> <i class='el-icon-caret-top rise'></i>"								
							}
						};
					};

				};
				connet.MainData.onerror = function(evnt) {
					console.log("  websocket.onerror");
				};
				connet.MainData.onclose = function(evnt) {
					console.log("  websocket.onclose");
				};
			},
			// 创新区数据推送

			// 点击跳转
			RoutingJump(typenum) {
				var connet = this;
				connet.$router.push({
					path: '/coincoin',
					query: {
						code: typenum
					}
				});
			},
		},
		// 路由改变时
		beforeRouteLeave(to, from, next) {
			var conent = this;
			conent.MainData.close();
			conent.SecondData.close();
			next()
		},
		created: function() {
			var connet = this;
			connet.GetDatamain();
		}
	}
</script>